<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <div style="margin-bottom:18px;">
            <el-input style="width: 13%" v-model="queryForm.module" placeholder="模块"></el-input>
            <el-input style="width: 13%" v-model="queryForm.url" placeholder="接口地址"></el-input>
            <el-button @click="handleQuery">查询</el-button>
        </div>

        <el-table :data="tableData" :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" style="font-size: 14px" border>
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="fullName" label="用户"></el-table-column>
            <el-table-column prop="url" label="接口地址"></el-table-column>
            <el-table-column prop="param" label="请求参数"></el-table-column>
            <el-table-column prop="time" label="耗时"></el-table-column>
            <el-table-column prop="ip" label="IP"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                       :page-sizes="[10, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
			    currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                queryForm: {
                    module: '',
                    url: ''
                }
			}
        },
        created() {
            this.handleQuery();
        },
        methods: {
        	handleCurrentChange(val) {
                this.currentPage = val;
                this.handleQuery();
			},
			handleSizeChange(val) {
                this.pageSize = val;
                this.handleQuery();
            },
            handleQuery() {
                let queryParam = {
                    pageNo:this.currentPage,
                    pageSize:this.pageSize,
                    module:this.queryForm.module,
                    url:this.queryForm.url
                };
                query('/log/api/list', queryParam, this);
            }
        }
    });
</script>
</html>
